<template>
  <transition
    name="staggered-fade"
    mode="out-in"
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
  >
    <slot />
  </transition>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import gsap from "gsap";
export default defineComponent({
  name: "ts-drop",
  props: {
    marginTop: {
      type: [Number, String],
      default: 0,
    },
  },
  setup(props, context) {
    const beforeEnter = (el: any) => {
      el.style.opacity = 0;
      el.style.marginTop = "20px";
    };
    const enter = (el: any, done: any) => {
      gsap.to(el, {
        opacity: 1,
        marginTop: props.marginTop,
        delay: el.dataset.index * 0.15,
        onComplete: done,
      });
    };
    const leave = (el: any, done: any) => {
      gsap.to(el, {
        opacity: 0,
        marginTop: "20px",
        delay: el.dataset.index * 0.1,
        onComplete: done,
      });
    };
    return {
      beforeEnter,
      enter,
      leave,
    };
  },
});
</script>

<style lang=""></style>
